import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import details from '../details/details.jsx'

export default class search extends Component {
  state = {
    adminList: [
      { id: 1, name: '橘子一号' },
      { id: 2, name: '橘子二号' },
      { id: 3, name: '橘子三号' },
      { id: 4, name: '橘子四号' },
      { id: 5, name: '橘子五号' },
      { id: 6, name: '橘子六号' },
      { id: 7, name: '橘子七号' },
      { id: 8, name: '橘子八号' }
    ]
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.adminList.map(v => (
            // replace: 不保留本页面并跳转至新页面
            // <li key={v.id}><Link replace to={`${this.props.match.path}/details?id=${v.id}&name=${v.name}`}>{v.name}</Link></li>
            <li key={v.id} onClick={() => this.nav(v)} data-item={v} style={{cursor: 'pointer'}}>{v.name}</li>
          ))}
        </ul>
        <hr />
        <Route path="/parameter/search/details" component={details} />
      </div>
    )
  }

  nav = (item) => {
    // this.props.history.push(`${this.props.match.path}/details?id=${item.id}&name=${item.name}`)
    this.props.history.replace(`${this.props.match.path}/details?id=${item.id}&name=${item.name}`)
  }
}
